<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>


  <!--bootstrap3-->
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
  <link rel="stylesheet" href="/css/style.css">



</head>
<body>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">教师信息</h3>
  </div>
  <div class="panel-body">
    <div style="display:inline-block;">

      <div style="float:left;padding:6px;">
        <span>姓名：</span>
      </div>
      <div style="float:left;">
        <input id="searchName" class="form-control" style="width:200px;" placeholder="请输入姓名" />
      </div>
      <div style="float:left;padding:6px;">
        <span>性别：</span>
      </div>
      <div style="float:left;">
        <select id="gender" class="form-control" style="width:87px;">
          <option value="">请选择</option>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div style="float:left;margin-left:20px;">
        <button id="query" class="btn btn-primary" onclick="search();">
                        <span class="glyphicon glyphicon-search">
		                </span> 查询
        </button>
        <button id="refresh" class="btn btn-default" onclick="resetList();">
                        <span class="glyphicon glyphicon-refresh">
		                </span> 刷新
        </button>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
                        <span class="glyphicon glyphicon-plus">
                        </span>新增
        </button>
        <button type="button" class="btn btn-danger"   onclick="batchDelete();">
                        <span class="glyphicon glyphicon-trash">
                        </span>批量删除
        </button>
        <button type="button" id="upload" class="btn btn-info move">
          批量导入
        </button>

        <button type="button"  class="btn btn-warning" onclick="exportTeacher();">
          导出
        </button>

      </div>
    </div>
  </div>
</div>

<div class="box1">
  <table class="table table-bordered table-striped" id="stuTable"></table>
</div>


<!--批量导入模态框-->
<!--批量导入操作-->
<!-- 模态框（Modal） -->

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ModalLabel">文件上传</h4>
      </div>
      <div class="modal-body">
        <input id="f_upload" type="file"  name="file"/>
      </div>

    </div>
  </div>
</div>


<!-- 学生Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">教师信息</h4>
      </div>
      <div class="modal-body">
        <form id="formStudent">
          <input hidden="hidden" id="id" name="id">
          <div class="form-group">
            <label for="tno">教工号</label>
            <input type="text" class="form-control" id="tno" aria-describedby="emailHelp" placeholder="Enter tno" name="tno">
          </div>
          <div class="form-group">
            <label for="tname">姓名</label>
            <input type="text" class="form-control" id="tname" aria-describedby="emailHelp" placeholder="Enter tname" name="tname">
          </div>

          <div class="form-group">
            <label for="sex">性别</label>
            <select class="form-control" id="sex" name="sex">
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>

          <div class="form-group">
            <label for="tage">年龄</label>
            <input type="text" class="form-control" id="tage" aria-describedby="emailHelp" placeholder="Enter tage" name="tage">
          </div>

          <div class="form-group">
            <label for="password">密码</label>
            <input type="text" class="form-control" id="password" aria-describedby="emailHelp" placeholder="Enter password" name="password">
          </div>

          <div class="form-group">
            <label for="cname">课程名</label>
            <input type="text" class="form-control" id="cname" aria-describedby="emailHelp" placeholder="Enter cname" name="cname">
          </div>

          <div class="form-group">
            <label for="prof">职称</label>
            <input type="text" class="form-control" id="prof" aria-describedby="emailHelp" placeholder="Enter prof" name="prof">
          </div>

          <div class="form-group">
            <label for="sala">薪水</label>
            <input type="text" class="form-control" id="sala" aria-describedby="emailHelp" placeholder="Enter sala" name="sala">
          </div>

          <div class="form-group">
            <label for="deptid">院系编号</label>
            <input type="text" class="form-control" id="deptid" aria-describedby="emailHelp" placeholder="Enter deptid" name="deptid">
          </div>

          <div class="form-group">
            <label for="mid">专业编号</label>
            <input type="text" class="form-control" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid">
          </div>


        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="saveStudent();">
          <span class="glyphicon glyphicon-floppy-save"></span>
          保存
        </button>
      </div>
    </div>
  </div>
</div>




<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/teacherupload.js"></script>
<script src="/js/fileinput.min.js"></script>
<script src="/js/msg.js"></script>
<script>

  /**
   * 显示学生列表
   */
  function loadTable(){
    $("#stuTable").bootstrapTable({
      url: '/webapi/teacher/getbypage',
      striped:true, //设置为ture有隔行变色效果
      pagination:true,//设置为true会在底部显示分页条
      singleSelect: false,//设置为true将禁止多选
      pageSize:8,   //设置分页的每页条数
      pageList:[8],
      pageNumber:1, //设置了分页，首页页码
      maintainSelected :true, //3,开启分页保持选择状态，就是用户点击下一页再次返回上一页,如果是客户端分页，这个设为true翻页后已经选中的复选框不会丢失
      uniqueId : "id", //每一行的唯一标识，一般为主键列
      clickToSelect: true,
      sidePagination: "server", //设置在哪里进行分页，可选值为"client"或者
      queryParams:function (params){
        let paraObj = {
          size: params.limit,
          page: params.offset/params.limit,
          sort: "id",
          direct: "asc",
          tname:$("#searchName").val(),
          sex: $("#gender").val()
        };
        return paraObj;
      },
      /**
       * onClickCell: 单击单元格触发
       * field    点击单元格的字段名称
       * value    点击单元格的数据值
       * row      点击列的整行数据
       * $element 当前点击td的Dom元素
       */
      onClickCell:function (field,value,row,$element){
        $element.attr('contenteditable', true);
        //元素失去焦点事件
        $element.blur(function() {
          //单元格修改后的的值
          let tdValue = $element.html();
          let index = $element.parent().data('index');

          //updateCell更新某单元格数据
          $("#stuTable").bootstrapTable('updateCell', {
            index: index,       //行索引
            field: field,       //列名
            value: tdValue        //cell值
          })

          $.ajax ({

            url:"/webapi/teacher/update",
            method:"put",
            data: row

          }).done(function (rs) {
            console.log(rs)
            if (rs.code === 200){
              $('#stuTable').bootstrapTable('destroy');
              loadTable();
              message.showText("success","更新成功")
            }
          });
          console.log(field);
          console.log(tdValue);
          console.log(row);
        })
      },
      onLoadError:function (rs){
        console.log(rs)
        if (rs.code == 403){
          window.location.href = "../../templates/login/user.html"
        }
      },
      responseHandler:function (res){
        console.log(res.data)
        return {
          "total": res.data.total, // 总页数
          "rows": res.data.rows    // 数据
        }
      },
      columns:[{
        checkbox: true,
        formatter:function (i,row) {  //每次加载checkbox时判断当前row的id是否已经存在全局Set()里
          if($.inArray(row.id,overAllIds) !== -1)  { //判断数组里有没有这个id
            return{
              checked: true     //存在则选中
            }
          }else{
            return {
              checked: false
            }
          }
        }
      },{
        field: "id",
        title: "序号"
      },{
        field: "tno",
        title: "教工号"
      },{
        field: "tname",
        title: "姓名"
      },{
        field: "sex",
        title: "性别"
      },{
        field: "tage",
        title: "年龄"
      },{
        field: "cname",
        title: "课程名"
      },{
        field: "prof",
        title: "职称"
      },{
        field: "sala",
        title: "薪水"
      },{
        field: "deptid",
        title: "院系编号"
      },{
        field: "mid",
        title: "专业编号"
      },{
        field: 'id',
        title: '操作',
        align: 'center',
        formatter: function(value,row,index){
          // let e = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+row.id+");'>编辑</a> "
          // let d = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+row.id+")'>删除</a>"
          let e = "<button  class='btn btn-primary btn-xs' style='width: 60px;height: 30px' onclick='editStudent("+row.id+");'>" +
                  "<span class='glyphicon glyphicon-edit'></span>编辑</button> "
          let d = "<button  class='btn btn-danger btn-xs' style='width: 60px;height: 30px' onclick='deleteStudent("+row.id+")'>" +
                  "<span class='glyphicon glyphicon-trash'></span>删除</button>"
          return e + d ;
        },width:250 //自定义修改，增加修改、删除标志
      }],
      formatNoMatches: function (){
        return "没有相关的匹配结果";
      },
      formatLoadingMessage:function (){
        return "请稍等，正在加载中...";
      }
    });

    // 点击时获取选中的行或取消选中的行，保存到全局 Array 里
    $('#stuTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
      let datas = $.isArray(rows) ? rows : [rows];
      saveCheckState(e.type,datas);
    });
  }

  //定义全局的存储数组，用于存储复选框的标识
  let overAllIds = [];

  function saveCheckState(type, datas){
    if(type.indexOf('uncheck')===-1){
      $.each(datas,function(i,v){
        // 添加时，判断一行或多行的 id 是否已经在数组里 不存则添加
        overAllIds.indexOf(v.id) === -1 ? overAllIds.push(v.id) : -1;
      });
    }else{
      $.each(datas,function(i,v){
        overAllIds.splice(overAllIds.indexOf(v.id),1);    //删除取消选中行
      });
    }

    // console.log(overAllIds);
  }



  function exportTeacher(){
    // $.ajax({
    //     url:"/webapi/export/student",
    //     method: "get"
    // }).done(function (rs){
    //     message.showText("success","导出成功")
    // })
    let form = $("<form>");
    form.attr("style","display:none");
    form.attr("target","");
    form.attr("method","get");
    form.attr("action","/webapi/export/teacher");
    $("body").append(form);
    form.submit();
    form.remove();
    // window.location.href = "/webapi/export/student";
    message.showText("success","导出成功");
  }
  /**
   * 批量删除
   */
  function batchDelete(){
    // let rows = $("#stuTable").bootstrapTable("getSelections");
    let len = overAllIds.length;
    if(len === 0){
      message.showText("success","请选择要删除的行");
    }else{
      if(confirm("你确定删除"+len+"条内容吗？")){
        let arr = [];
        for (let i = 0;i < len;i++){
          arr.push(overAllIds[i]);
        }
        $.ajax({
          url: '/webapi/teacher/batchdelete/'+arr,
          method: 'delete'
        }).done(function (rs){
          if (rs.code === 200){
            $("#stuTable").bootstrapTable("destroy");
            loadTable();
            message.showText("success","批量删除成功");
          }

        })
      };


    }

  }

  /**
   * 删除学生
   */
  function deleteStudent(id){
    if(confirm("您是否真的要删除该记录?")){
      $.ajax({
        url: '/webapi/teacher/delete/'+id,
        method: 'delete'
      }).done(function (rs){
        if (rs.code == 200){
          message.showText("success","删除成功");
          $("#stuTable").bootstrapTable("destroy");
          loadTable();
        }

      })
    }

  }

  /**
   * 点击新增时给id赋值，以便判断做新增操作
   */
  function preAdd(){
    $("#id").val(0);
    $("#tno").val("");
    $("#tname").val("");
    $("#sex").val("");
    $("#tage").val("");
    $("#password").val("");
    $("#cname").val("");
    $("#prof").val("");
    $("#sala").val("");
    $("#deptid").val("");
    $("#mid").val("");
  }

  // 修改之前获取学生信息
  function editStudent(id){
    $('#myModal').modal('show')
    $.ajax({
      url:'/webapi/teacher/get/'+id
    }).done(function (rs){
      console.log(rs)
      if (rs.code === 200){
        let data = rs.data
        $("#id").val(data.id);
        $("#tno").val(data.tno);
        $("#tname").val(data.tname);
        $("#sex").val(data.sex);
        $("#tage").val(data.tage);
        $("#password").val(data.password);
        $("#cname").val(data.cname);
        $("#prof").val(data.prof);
        $("#sala").val(data.sala);
        $("#deptid").val(data.deptid);
        $("#mid").val(data.mid);
      }
    })
  }

  /**
   * 根据id判断是新增还是更新，判断之后做新增和更新操作
   */
  function saveStudent(){
    let data = $("#formStudent").serialize();
    let id = $("#id").val();
    if (id < 1){
      //是新增
      $.ajax ({
        url:"/webapi/teacher/insert",
        method:"post",
        data:data
      }).done(function (rs) {
        console.log(rs)
        if (rs.code == 200){
          $('#stuTable').bootstrapTable('destroy');
          loadTable();
          $('#myModal').modal('hide');
          message.showText("success","新增成功");
        }

      });
    } else {

      //是更新
      $.ajax ({

        url:"/webapi/teacher/update",
        method:"put",

        data:data

      }).done(function (rs) {
        if (rs.code === 200){
          $('#stuTable').bootstrapTable('destroy');
          loadTable();
          $('#myModal').modal('hide');
          message.showText("success","更新成功");
        }
      });
    }
  }

  /**
   * 刷新数据
   */
  function resetList(){
    $("#searchName").val("");
    $("#gender").val("");
    $('#stuTable').bootstrapTable("destroy");
    loadTable();
    message.showText("success","刷新成功");
  }
  function search(){
    $("#stuTable").bootstrapTable("destroy");
    loadTable();
  }

  $(function (){
    loadTable();
    message.showText("success","获取成功");
  })
</script>

</body>
</html>